<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <div id="list-demo" class="demo">
            <button v-on:click="add">Add</button>
            <button v-on:click="remove">Remove</button>
            <transition-group name="list" tag="p">
                <span v-for="item in items" v-bind:key="item" class="list-item">
                    {{item}}
                </span>
            </transition-group>
        </div>
    </div>

    <script>
        // <transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染。
        // 每个 <transition-group> 的子节点必须有独立的 key，动画才能正常工作。
        let vm = new Vue({
            el: '#app',
            data: {
                items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                nextNum: 10,
            },
            methods: {
                randomIndex: function () {
                    return Math.floor(Math.random() * this.items.length)
                },
                add: function () {
                    this.items.splice(this.randomIndex(), 0, this.nextNum++);
                },
                remove: function () {
                    this.items.splice(this.randomIndex(), 1);
                },
            },
        });
    </script>

</body>

</html>